<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>隔行变色</title>
  <style>
    ul{
      background-color: #ececec;
    }
    li{
      list-style: none;
    }
  </style>
  <script>
    window.onload = function() {
      var Li = document.getElementsByTagName('li');
      for(var i = 0; i < Li.length; i++) {
        //i 0 1 2 3 4 5...
        if(i % 2 == 0) {
          //2 4 6 8 ...
          Li[i].style.background = '#rgb(255,255,255)';
        } else {
          //1 3 5 7 9 ...
          Li[i].style.background = '#b3d9ff';
        }
      }
    }
  </script>
</head>

<body>
<ul>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
</ul>
</body>
</html>
